<template>
  <div class="setting">
    <div class="setting-container">
      <div class="setting-left">
        <div class="setting-title">设置</div>
        <div class="setting-nav">
          <router-link
            v-for="item in settingNav"
            :key="item.name"
            :to="item.path"
            :class="`setting-nav-item ${item.path === $route.path ? 'active' : ''}`"
          >
            <i :class="`setting-nav-item-icon ${item.icon}`"></i>
            <span class="setting-nav-item-name">{{ item.name }}</span>
          </router-link>
        </div>
      </div>
      <div class="setting-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

const settingNav = [
  {
    name: '主题',
    path: '/setting/theme',
    icon: 'ri-palette-line'
  },
  {
    name: '关于',
    path: '/setting/about',
    icon: 'ri-information-line'
  }
]
</script>

<style lang="scss" scoped>
.setting {
  width: 100%;
  height: 100%;
}

.setting-container {
  display: flex;
  width: 100%;
  height: 100%;

  .setting-left {
    padding: 20px 10px;
    height: 100%;
    background-color: var(--xz-secondbg);
    width: 200px;
    display: flex;
    flex-direction: column;

    .setting-title {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
      margin-left: 8px;
    }

    .setting-nav {
      display: flex;
      margin-top: 10px;
      flex-direction: column;
      gap: 4px;

      .setting-nav-item {
        padding: 8px;
        display: flex;
        gap: 10px;
        border-radius: var(--xz-main-radius);
        transition: all 0.25s ease;

        &:hover {
          background-color: var(--xz-theme);
          color: var(--xz-card-bg);
        }

        &.active {
          background-color: var(--xz-theme);
          color: var(--xz-card-bg);
        }
      }
    }
  }

  .setting-right {
    height: 100%;
    width: calc(100% - 200px);
  }
}
</style>
